/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import { Table, Button, Icon, Modal, message, Input } from 'antd';
import ReactKey from "../../../util/ReactKey";
import Util from "../../../util/Util";
import GetPlanDetailMutation from './mutation/GetPlanDetailMutation';
import GetProDigestMutation from "../productionLicense/mutation/GetProDigestMutation"
import SavePlanDetailMutation from "./mutation/SavePlanDetailMutation"
import "../css/fabricRaw.css";
import "../css/productionManagement_common.css";
import SelectMaterialModal from "./SelectMaterialModal";
import DemandQuantityModal from "./DemandQuantityModal";
import AddImgModal from "../productionLicense/licenseEdit/AddImgModal";

export default class MaterialBill extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            editable: true,
            value:'',
            proDigestModel:[],
            context:[{},{}],
            proMaterialIds: [],
            dataSource: [],
            materialIndex: 0,
            demandQuantityIndex: 0,
            loading: true,
            pdId:this.props.location.state.pdId,
            /*删除项*/
            visible:false,
            imgLook:"",
        };
        this.planIdsDel = [];
    }

    componentWillMount(){
        this.proDigest();
        this.getPlanDetail()
    }
    /*表格上方信息*/
    proDigest(pageSize,pageNum){
        Relay.Store.commitUpdate(
            new GetProDigestMutation({
                pdId: this.state.pdId,
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败")
                },
                onSuccess: (response) => {
                    let errorCode = response.getProDigest.responseData.errorCode;
                    let value = response.getProDigest.responseData.value;
                    if(errorCode=='0'){
                        let proDigestModel = response.getProDigest.responseData.proDigestModel;
                        this.setState({
                            proDigestModel:proDigestModel,
                        });
                    }else if(errorCode == 500){
                        message.error('服务器错误，请联系系统管理员')
                    }
                }
            }
        )
    }
    /*拉取表格数据*/
    getPlanDetail() {
        Relay.Store.commitUpdate(
            new GetPlanDetailMutation({
                pdId: this.state.pdId,
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败")
                    this.setState({
                        loading: false
                    })
                },
                onSuccess: (response) => {
                    let errorCode = response.getPlanDetail.responseData.errorCode
                    if (errorCode == 0) {
                        let planDetailModelList = response.getPlanDetail.responseData.planDetailModelList
                        /*if (!planDetailModelList.length) {
                            planDetailModelList.push({
                                // addRow: 1,
                                pdId: this.state.pdId || null,
                                planId:null,
                                productName: null,
                                imgUrl: null,
                                specification: null,
                                colour: null,
                                prickle:  null,
                                needCount:  null,
                                thisTimeCount:  null,
                                totalCount:  null,
                                varianceCount:  null,
                                ratio:  null,
                                remark: null,
                            })
                        }*/
                        this.setState({
                            dataSource: planDetailModelList,
                            loading: false
                        })
                    } else if(errorCode == 500){
                        message.error('服务器错误，请联系系统管理员');
                        this.setState({
                            loading:false,
                        })
                    }
                }

            }
        );
    }
    handleOk = (e) => {
        // console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        // console.log(e);
        this.setState({
            visible: false,
        });
    }
    imgLook(imgUrl) {
        if (imgUrl) {
            this.setState({
                visible: true,
                imgLook: imgUrl
            })
        }
    }
    render(){
        let { dataSource,proDigestModel} = this.state;
        const { value, editable } = this.state;
        const columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                render: ((text, record, index) =>{
                    return index+1
                })
            },
            {
                title:"物料名称",
                dataIndex: 'productName',
                key: 'productName',
                width: 200,
                render:(text, record, index) =>{
                    // console.log(record.productName);
                    return <span className="" ref={"productName"}  title={record.productName}>{record.productName}</span>
                }
            },
            {
                title: '图片',
                dataIndex: 'imgUrl',
                key: 'imgUrl',
                width: 200,
                render: ((text, record, index) =>{
                    let imgUrl = record.imgUrl?JSON.parse(record.imgUrl):null;
                    return imgUrl && imgUrl.url?
                            (
                                <img width="94" onClick={this.imgLook.bind(this,imgUrl.url)} className="production_fabricRawLook_td_img_context" alt="" src={imgUrl.url}/>
                            ) :(
                                <span className="production_fabricRawLook_td_img_context" title="未上传图片"></span>
                        )
                })
            },
            {
                title: '规格',
                dataIndex: 'specification',
                key: 'specification',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"specification"}>{record.specification}</span>
                }
            },
            {
                title: '颜色',
                dataIndex: 'colour',
                key: 'colour',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"colour"}>{record.colour}</span>
                }

            },
            {
                title: '单位',
                key: 'prickle',
                dataIndex: 'prickle',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"prickle"}>{record.prickle}</span>
                }
            },
            {
                title:"需求数",
                dataIndex: 'needCount',
                key: 'needCount',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"needCount"}>{record.needCount}</span>
                }
            },
            {
                title: "本次到料数",
                dataIndex: 'thisTimeCount',
                key: 'thisTimeCount',
                width: 100,
                render:(text, record, index) =>{
                    return <span className="" ref={"totalCount"}>{Number(record.thisTimeCount)}</span>
                }
            },
            {
                title: '累计到料数',
                dataIndex: 'totalCount',
                key: 'totalCount',
                width: 200,
                render:(text, record, index) =>{
                    return <span className="" ref={"totalCount"}>{Number(record.totalCount)}</span>
                }
            },
            {
                title: '差异数',
                dataIndex: 'varianceCount',
                key: 'varianceCount',
                width: 100,
                render:(text, record, index) =>{

                    return <span className="" ref={"varianceCount"}>{Number(record.varianceCount)}</span>
                },
            },
            {
                title: '到料比例(%)',
                key: 'ratio',
                dataIndex: 'ratio',
                width: 180,
                render:(text, record, index) =>{
                    return <span className="" ref={"ratio"}>{record.ratio}%</span>
                }
            },
            {
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                width: 200,
                render:(text, record, index) =>{
                    return <span className="" ref={"ratio"}>{record.remark}</span>
                }
            },
        ];
        return (
            <div className="poduction_manage_box" >
                <div className="prodution_fabricRaw_index_info">
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">订单编号：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.orderId}</span>
                    </span>
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">客户：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.customerName}</span>
                    </span>
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">款号：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.styleNo}</span>
                    </span>
                </div>
                <div>
                    <Table
                        columns={columns}
                        dataSource={dataSource}
                        bordered
                        className="order_table"
                        pagination={false}
                        style={{width:'100%',marginTop:"20px"}}
                        loading={this.state.loading}

                    />
                </div>
                <Modal title="查看图片" visible={this.state.visible}
                       onOk={this.handleOk} onCancel={this.handleCancel}
                       footer={null}
                       wrapClassName='number_detail_img_modal'
                       okText="OK" cancelText="Cancel"
                >
                    <img src={this.state.imgLook} alt="图片" />
                </Modal>
            </div>
        )
    }
}
